<template>
	<view class=''>
		<radio-group name="pay_type" @change="pay_type_change">
			<block v-for="item in payments" :key="item.code">
				<view class="pay_item" v-if="!(type == 2 && item.code == 'balancepay')">
					<image :src="item.icon" mode="aspectFill" class="pay_icon"></image>
					<view class="" style="flex: 1;">
					<!-- 	{{ item.name }} -->
					<view class="" v-if="item.name==='余额支付'">
						{{ item.name}} ({{userBalance}})
					</view>
					 
					<view class="" v-else>
						{{ item.name}}
					</view>
						<!-- <view class="emo">{{ item.memo }}</view> -->
					</view>
					<radio :value="item.code" :checked="current_code==item.code" />
				</view>
				<view class="tishi" v-if="item.code == 'offlinepay' && current_code =='offlinepay'">
					请在扫码后在备注栏填写您的手机号码。以免影响您的到账！
				</view>
				<view class="input_box" v-if="item.code == 'offlinepay' && current_code =='offlinepay'">
					<view class="input_img_box">
						<image :src="shoukuan" mode="widthFix" @tap="show_img(shoukuan)" class="input_img"></image>
						收款二维码
					</view>
					<view class="input_img_box">
						<image src="/static/user/add_btn.png" v-if="!pingzheng" @tap="upload" mode="widthFix"
							class="input_img"></image>
						<image :src="pingzheng" v-else @tap="upload" mode="widthFix" class="input_img">
						</image>
						付款凭证
					</view>
				</view>
			</block>
		</radio-group>
	<!-- 	<view class="" @click="aa()">
			支付宝
		</view> -->
	</view>
</template>
<style>
	.tishi {
		padding: 0 10rpx;
		font-size: 35rpx;
		font-weight: 600;
		line-height: 80rpx;
		color: red;
	}

	.input_img {
		width: 250rpx;
		height: 250rpx;
	}

	.input_img_box {
		width: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		line-height: 2;

	}

	.input_box {
		width: 100%;
		box-shadow: 0px 10rpx 40rpx rgba(0, 0, 0, 0.53);
		background: #202126;
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
	}

	.emo {
		font-size: 24rpx;
		color: #f0d6b3;
	}

	.pay_icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;

	}

	.pay_item {
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
		
		/* background-color: #fff; */
		/* box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16); */
		height: 100rpx;
		/* margin-bottom: 30rpx; */
		box-sizing: border-box;
		border-radius: 20rpx;
	}
</style>


<script>
	import {
		apiBaseUrl
	} from '@/config/config.js'
	import {
		h5Url
	} from '@/config/config.js'
	export default {
		props: {
			//数量
			vModelValue:{
				// type: String,
				// default () {
				// 	return ''
				// }
				type: Number,
				default () {
					return 1//数量默认
				}
			},
			// 如果是商品订单此参数必须
			orderId: {
				type: String,
				default () {
					return ''
				}
			},
			// 如果是充值订单此参数必须
			recharge: {
				type: Number,
				default () {
					return 0
				}
			},
			// 用户id
			uid: {
				type: Number,
				default () {
					return 0
				}
			},
			// 订单类型
			type: {
				type: Number,
				default () {
					return 1
				}
			},
			sell_sn: {
				sell_sn: String,
				default () {
					return ''
				}
			},
			//支付类型
			pay_type: {
				pay_type: String,
				default () {
					return ''
				}
			},
			
			goods_code: {
				goods_code: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				userBalance:"",
				payments: [],
				popShow: false,
	        	vModelValue:"",
				shoukuan: '',
				pingzheng: '',
				current_code: '',
				goods_code:'',
				sell_sn:''
			}
		},
		mounted() {

			this.getPayments()
			this.getUserInfo()
		},
		methods: {
			aa(){
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data;
						this.userBalance=res.data.balance;
						 console.log("---",this.userInfo )
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			show_img: function(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			upload: function() {
				this.$api.uploadFiles(res => {
					if (res.status) {
						this.pingzheng = res.data.url

						this.$emit('change_img', this.pingzheng)
					}
				})
			},

			pay_type_change: function(e) {
				console.log(e)
				this.$emit('change_type', e.detail.value)
				this.current_code = e.detail.value;
				if (e.detail.value == 'offlinepay') {
					let data = {
						code: 'offlinepay'
					}
					this.$api.getPaymentInfo(data, res => {
						if (res.status) {
							this.shoukuan = res.data;

						}
					})
				}
			},
			// 获取可用支付方式列表
			getPayments() {
				this.$api.paymentList({
					payment_code: this.pay_type,
					payment_type: this.type
				}, res => {
					console.log(res)
					if (res.status) {

						this.payments = this.formatPayments(res.data)
						this.current_code = this.payments[0].code
						this.$emit('change_type', this.current_code)

						if (this.current_code == 'offlinepay') {
							let data = {
								code: 'offlinepay'
							}
							this.$api.getPaymentInfo(data, res => {
								if (res.status) {
									this.shoukuan = res.data;

								}
							})
						}
					}
				})
			},
			// 支付方式处理
			formatPayments(payments) {
				// 如果是充值订单 过滤余额支付 过滤非线上支付方式
				if (this.type === 2) {
					payments = payments.filter(item => item.code !== 'balancepay' || item.is_online === 1)
				}

				// 设置logo图片
				payments.forEach(item => {
					this.$set(item, 'icon', '/static/image/' + item.code + '.png')
				})
				return payments
			},
			// 用户点击支付方式处理
			toPayHandler() {
				this.popShow = true;
				if (!this.pay_type) {
					this.$common.errorToShow('请选择支付方式');
					return
				}
				let code = this.pay_type
				let _this = this

				// let data = {
				// 	payment_code: code,
				// 	payment_type: _this.type,
				// 	num:this.vModelValue
				// }
				if(code==='huifupay'){
					var data = {
						sell_sn:_this.sell_sn,
						goods_code:_this.goods_code,
						payment_code:code,
						payment_type: _this.pay_type,
						num: _this.vModelValue
					}
				}else{
					var data = {
						sell_sn:_this.sell_sn,
						goods_code:_this.goods_code,
						payment_code:code,
						payment_type: code,
						num: _this.vModelValue
					}
				}

				data['ids'] = (this.type == 1 || this.type == 5 || this.type == 6 || this.type == 7 || this.type == 8) ?
					this.orderId : this
					.uid
				if ((this.type == 5 || this.type == 6) && this.recharge) {
					data['params'] = {
						trade_type: 'APP',
						formid: this.orderId
					}
				}
				switch (code) {
					case 'adapaya':
						data['params'] = {
							trade_type: 'APP',
							return_url: h5Url + 'pages/payment/result_app',
						}
						if (_this.type == 2 ||_this.type==9 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge,
								return_url: h5Url + 'pages/payment/result_app',
							}
						}
						if (this.type == 2 ||this.type==9 && this.recharge) {
							data['params'].money = this.recharge
						}
						this.$api.pay(data, res => {
							if (res.status) {
								// #ifdef H5
								window.location.href = res.data;
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(res.data);
								// #endif
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
						break;
					case 'sumpay':
						data['params'] = {
							trade_type: 'APP',
							return_url: h5Url + 'pages/payment/result_app',
						}
						if (_this.type == 2 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge,
								return_url: h5Url + 'pages/payment/result_app',
							}
						}
						if (this.type == 2 && this.recharge) {
							data['params'].money = this.recharge
						}
						this.$api.pay(data, res => {
							if (res.status) {
								// #ifdef H5
								window.location.href = res.data;
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(res.data);
								// #endif
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
						break;
					case 'offlinepay':
						data['params'] = {
							trade_type: 'APP',
							return_url: h5Url + 'pages/payment/result_app',
							image: this.pingzheng
						}

						if (_this.type == 2 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge,
								return_url: h5Url + 'pages/payment/result_app',
								image: this.pingzheng
							}
						}
						if (this.type == 2 && this.recharge) {
							data['params'].money = this.recharge
						}
						this.$api.pay(data, res => {
							console.log(res.data);
							if (res.status) {
								this.$common.successToShow(res.msg, res => {
									uni.navigateBack()
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
						break;
					case 'sandpay':
						data['params'] = {
							trade_type: 'APP',
							return_url: h5Url + 'pages/payment/result_app',
						}

						if (_this.type == 2 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge,
								return_url: h5Url + 'pages/payment/result_app',
							}
						}
						if (this.type == 2 && this.recharge) {
							data['params'].money = this.recharge
						}
						this.$api.pay(data, res => {
							console.log(res.data);
							if (res.status) {
								// window.location = res.data;
								plus.runtime.openURL(res.data, r => {
									console.log(r)
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
						break;
					case 'alipay':
						/**
						 * 支付宝支付需要模拟GET提交数据
						 */
						if (_this.type == 1 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP'
							}
						} else if (_this.type == 2 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge
							}
						} else if (_this.type == 7 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP',
							}
						} else if (_this.type == 8 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP',
							}
						}

						_this.$api.pay(data, res => {
							if (res.status) {
								uni.requestPayment({
									provider: "alipay",
									orderInfo: res.data.data,
									success: function(data) {
										_this.$common.successToShow('支付成功', () => {
											_this.redirectHandler(res.data.payment_id)
										})
									}
								});
							} else {
								_this.$common.errorToShow(res.msg)
							}
						})
						break
					case 'wechatpay':
						// 微信 H5支付
						if (_this.type == 1 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP'
							}
						} else if (_this.type == 2 && _this.recharge) {
							data['params'] = {
								trade_type: 'APP',
								money: _this.recharge
							}
						} else if (_this.type == 7 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP',
							}
						} else if (_this.type == 8 && _this.orderId) {
							data['params'] = {
								trade_type: 'APP',
							}
						}


						// 微信app支付
						_this.$api.pay(data, res => {
							if (res.status) {
								//console.log(JSON.stringify(res));
								// 调用微信支付  
								let orderinfo = {
									appid: res.data.appid,
									noncestr: res.data.noncestr,
									package: res.data.package,
									partnerid: res.data.partnerid,
									prepayid: res.data.prepayid,
									timestamp: res.data.timestamp,
									sign: res.data.sign,
								}
								console.log(orderinfo)
								uni.requestPayment({
									provider: "wxpay",
									orderInfo: orderinfo,
									success: function(data) {
										_this.$common.successToShow('支付成功', () => {
											_this.redirectHandler(res.data.payment_id)
										})
									},
									fail: function(res) {
										console.log(JSON.stringify(res));
									}
								});
							} else {
								_this.$common.errorToShow(res.msg)
							}
						})
						break
					case 'balancepay':
						/**
						 *  用户余额支付
						 * 
						 */
						_this.$api.pay(data, res => {
							if (res.status) {
								_this.redirectHandler(res.data.payment_id)
							} else {
								_this.$common.errorToShow(res.msg)
							}
						})
						break
						case 'huifupay':
						   this.$api.pay(data, res => {
							console.log("huifupay", res)
							if (res.status===1) {
					    	this.$store.commit('ifhuifu',1)
					var huifuid=  this.$store.state.ifhuifu
						   console.log("支付",huifuid)
								// let style = {
								// statusbar: {
								// background:"#ffffff",
								// }
								// } 
								
								// const wv = plus.webview.create(res.data.pay_url ,"",style);
								// wv.show()
								uni.navigateTo({
									url: '/pages/user/webview/webview?url=' + res.data.redirect_url
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
							console.log("huifupay-----")
							break
					case 'offline':
						/**
						 * 线下支付
						 */
						_this.$common.modelShow('线下支付说明', '请联系客服进行线下支付', () => {}, false, '取消', '确定')
						break
				}
			},
			// 支付成功后跳转操作
			redirectHandler(paymentId) {
				this.$common.redirectTo('/pages/payment/result?id=' + paymentId)
			},
			// 支付中显示隐藏
			popBtn() {
				this.popShow = false
			}
		}

	}
</script>